<template>
   <div class="main commodity-freight-list">
        <div class="filter-container">
            <el-input @keyup.enter.native="search" class="filter-item" placeholder="按模板名称搜索" v-model="templateName"></el-input>
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            <el-button v-if="rightsButtons['template']" type="success" size="small"  class="filter-item look-btn" @click="goNext('freightTemplate')">查看运费模板</el-button>
        </div>
        <div class="feight-table-wrapper">
            <div class="freight-btn-wrapper">
                <el-button v-if="rightsButtons['add']" type="success" size="small"  icon="el-icon-plus" class="filter-item look-btn" @click="goNext('freightAdd')">新建配置模板</el-button>
            </div>
            <el-table :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border highlight-current-row>
                <el-table-column align="center" label="ID" prop="id"></el-table-column>
                <el-table-column align="center" label="模板名称" prop="freightTemplateNm"></el-table-column>
                <el-table-column align="center" label="配置类型">
                    <template slot-scope="scope"> 
                        {{getConfType(scope.row.configType)}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="配置时间" prop="createdAt"></el-table-column>
                <el-table-column align="center" label="操作" v-if="rightsButtons['view']">
                    <template slot-scope="scope"> 
                        <router-link :to="{name: 'freightView', params: {id: scope.row.id}}">
                            <el-button type="success" size="mini">查看</el-button>
                        </router-link>
                        <!--<el-button type="primary" size="mini" @click="showEdit(scope.row)">编辑</el-button>
                        <el-button type="danger" size="mini" @click="del(scope.row)">删除</el-button>-->
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination-container" v-if="total > 0">
            <el-pagination 
                @current-change="handleCurrentChange" 
                :current-page.sync="page" 
                :page-size="pageSize" 
                :total="total" 
                layout="total, prev, pager, next, jumper"
            ></el-pagination>
        </div>
        
    </div>
</template>

<script>
import {getTplConfList} from '@/api/freight'
export default {
    name: 'freight',
    data () {
        return {
            listLoading: false,   // 显示表格加载动画
            list: [],
            templateName: '',
            page: 1, // 当前页
            total: 0,  // 总页数
            pageSize: 10,  // 每页多少条

        }
    },
    created() {
        this.getList()
    },
    methods: {
        getList() {
            let params = {
                pageNo: this.page,
                pageSize: this.pageSize,
                templateName: this.templateName
            }
            this.listLoading = true
            getTplConfList(params).then(res => {
                if (res.status == 200) {
                    this.total = res.totalCount
                    this.list = res.data
                } else {
                    this.$message({
                        type: 'error',
                        message: res.message,
                        duration: 2000
                    })
                }
                this.listLoading = false
            }).catch(err => {
                this.total = 0
                this.list = []
                 this.listLoading = false
            })
        },
        getConfType(type) {
            const arr = ['经营模式', '商品类目', '指定商品'];
            return arr[type - 1];
        },
        /**
         * 查看运费模板列表,配置详情
        */
       goNext(name) {
           this.$router.push({
               name: name
           })
       },
        /**
         * 搜索
        */
        search() {
            this.page = 1
            this.getList()
        },
        /**
         * 分页切换
        */
        handleCurrentChange(index) {
            this.page = index
             this.getList()
        }
    }
}
</script>

<style scoped>
    .look-btn {
        float: right;
        margin-right: 20px;
    }
    .feight-table-wrapper {
        background-color: #fff;
    }
    .freight-btn-wrapper {
        overflow: hidden;
        padding: 20px 0;
      
    }
</style>